<template>
  <div class="dashboard-container">
    <div class="dashboard-text">数据统计</div>
    <el-row :gutter="3">
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>在线测试</span>
          </div>
          <div>
            <p> <el-tag>
                总数:
              </el-tag> {{ contestData.length }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>AI聊天</span>
          </div>
          <div>
            <p>
              <el-tag>
                总数:
              </el-tag>
              {{ aichatData.length }}
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div slot="header" class="clearfix">
            <span>视频信息</span>
          </div>
          <div>
            <p>
              <el-tag>
                总数:
              </el-tag>
              {{ videoData.length }}
            </p>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 10px;">
      <el-col :span="12">
        <div id="chart1" style="height: 300px;width: 100%; background-color: white; ;">
        </div>
      </el-col>
      <el-col :span="12">
        <div id="chart2" style="height: 300px;width: 100%;">
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import axios from 'axios'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      aichatData: [],
      contestData: [],
      videoData: [],
      info: {
        contestData: {
          'total': 0,
          'ongoing': 0,
          'finished': 0,
          'notstart': 0
        },
        aichatData: {
          'total': 0,
          'today': 0,
          'past': 0
        },
        videoData: {}
      }
    }
  },
  mounted() {
    const res1 = axios.post('http://localhost:8000/contests/get_one', {}).then(res => {
      this.contestData = res.data.data
      this.contestData.forEach(item => {
        if (dayjs(item.start_time).isBefore(dayjs()) && dayjs(item.end_time).isAfter(dayjs())) {
          this.info.contestData.ongoing++
        } else if (dayjs(item.start_time).isAfter(dayjs())) {
          this.info.contestData.notstart++
        } else {
          this.info.contestData.finished++
        }
      })
    })
    const res2 = axios.post('http://localhost:8000/aichat/get_one', {}).then(res => {
      this.aichatData = res.data.data
      this.aichatData.forEach(item => {
        if (dayjs(item.created_time).isBefore(dayjs())) {
          this.info.aichatData.past++
        } else {
          this.info.aichatData.today++
        }
      })
    })
    const res3 = axios.post('http://localhost:8000/videos/get_one', {}).then(res => {
      this.videoData = res.data.data
    })
    Promise.all([res1, res2, res3]).then(() => {
    }).then(() => {
      //柱状图，
      let option = {
        title: {
          text: '在线测试'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: ['进行中', '未开始', '已经结束']
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: [this.info.contestData.ongoing, this.info.contestData.notstart, this.info.contestData.finished]
        }]
      }
      let chart1 = echarts.init(document.getElementById('chart1'))
      chart1.setOption(option)
      let option2 = {
        title: {
          text: 'AI问答'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: ['今日新增', '历史']
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: [this.info.aichatData.today, this.info.aichatData.past]
        }]
      }
      let chart2 = echarts.init(document.getElementById('chart2'))
      chart2.setOption(option2)
    })
  }
}



</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
